<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos"/>
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import List from "@/components/List-组件间通信v-model测试";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components:{Footer, Header, List},
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:false},
        {id:'002',title:'唱歌',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  },
  methods:{
    //添加一个todo
    addTodo(addObj){
      this.todos.unshift(addObj)
    }
  }
}
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.bg{
  background-color: #333;
  height: 937px;
  padding-top: 100px;
  box-sizing: border-box;
  .todoList{
    background-color: #fff;
    width: 50%;
    height: 90%;
    margin: 0 auto;
    //box-shadow: 5px 5px 10px 3px rgba(147, 221, 255, 0.5),-5px -5px 10px 3px rgba(147, 221, 255, 0.5);  蓝色阴影
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5),-5px -5px 10px 3px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: 30px;
      font-weight: 300;
      color: #00a4ff;
    }
    .listItem{
      width: 90%;
      //height: 200px;
      margin: auto;
      /*background-color: pink;*/
      list-style: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
      padding: 20px 0;
      box-sizing: border-box;
    }
  }
}
</style>

